<template>
  <div class="module-container">
    <ModuleHeader
      title="市场久期变化趋势"
      subtitle="Market Duration Change Trend"
    />

    <div class="chart-container">
      <DurationTrendChart
        :series="durationTrendChartSeries"
        :height="300"
        :y-axis-range="[0, 4]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useDurationTrendData } from '../hooks/useDurationTrendData'
import DurationTrendChart from './DurationTrendChart.vue'
import ModuleHeader from '../common/ModuleHeader.vue'

const { durationTrendData } = useDurationTrendData()

// 久期变化趋势图表数据
const durationTrendChartSeries = computed(() => [
  durationTrendData.value.shortTermBondFunds,
  durationTrendData.value.mediumLongTermBondFunds
])
</script>

<style scoped>
.module-container {
  @apply bg-white rounded-[4px] shadow-sm mb-6 overflow-hidden;
  border: 1px solid #D4D8E5;
}

.chart-container {
  @apply p-6;
}
</style>
